<template>
  <!--
  添加按钮进行预审申请
  -->
  <div>
    <ant-modal
      modalWidth="900"
      modalHeight="800"
      :visible="open"
      modal-title="新增进件"
      :adjust-size="true"
      @cancel="cancel"
    >
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        slot="content"
        layout="vertical"
      >
        <a-row
          :gutter="32"
          style="width: 75%; margin-left: 15%; margin-top: -10px"
        >
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >基本信息</span
                >
              </div>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客户姓名" prop="customerName">
                <a-input
                  v-model="form.customerName"
                  placeholder="请选择客户"
                  disabled
                  style="width: 70%"
                >
                </a-input>
                <a-button
                  type="primary"
                  icon="user-add"
                  @click="handleOnSearchCustomer"
                  style="margin-left: 5px"
                >
                </a-button>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="电话" prop="phone">
                <a-input v-model="form.phone" placeholder="请输入电话" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="12">
              <a-form-model-item label="申请金额（元）" prop="yxEdu">
                <a-input-number
                  v-model="form.yxEdu"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入金额（元）"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客服" prop="servcieUserName">
                <a-input
                  v-model="form.servcieUserName"
                  placeholder="请选择客服"
                  style="width: 68%"
                  disabled
                >
                </a-input>
                <a-button
                  type="primary"
                  icon="customer-service"
                  @click="chooseUserVisible = true"
                  style="margin-left: 5px"
                >
                </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >产品信息</span
                >
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="12">
              <a-form-model-item label="服务机构（一）" prop="orgType">
                <a-select
                  placeholder="请选择服务机构"
                  v-model="form.orgType"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @change="handleGetProductInfo"
                >
                  <a-select-option
                    v-for="(d, index) in orgTypeOptions"
                    :key="index"
                    :value="d.dictValue"
                    >{{ d.dictLabel }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="产品名称（一）" prop="productId">
                <a-select
                  placeholder="请选择产品"
                  v-model="form.productId"
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  style="width: 100%"
                  allow-clear
                  @select="handleChooseProduct"
                >
                  <a-select-option
                    v-for="d in productList"
                    :key="d.productName"
                    :value="d.id"
                    >{{ d.productName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="8">
              <a-form-model-item label="" prop="">
                <a-button
                  type="primary"
                  icon="plus"
                  style="margin-top: 38px"
                  @click="proTwo = true"
                >
                  添加产品
                </a-button></a-form-model-item
              >
            </a-col> -->
          </a-row>

          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >服务费用</span
                >
              </div>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="杂费" prop="zfei">
                <a-input-number
                  v-model="form.zfei"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入杂费"
                  :max="10000000"
                  :formatter="(value) => `${value}元`"
                  :parser="(value) => value.replace('元', '')"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="管理费（百分比）" prop="">
                <a-input-number
                  v-model="form.glFei"
                  :min="0"
                  style="width: 100%"
                  placeholder="请输入申请金额百分比"
                  :max="100"
                  :formatter="(value) => `${value}%`"
                  :parser="(value) => value.replace('%', '')"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="费用备注" prop="serviceAmountRemark">
                <a-input
                  type="textarea"
                  v-model="form.serviceAmountRemark"
                  placeholder="请输入费用备注"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="32">
            <a-col :span="24" style="margin-left: -120px; margin-bottom: 15px">
              <div style="display: flex; flex-direction: row">
                <span
                  style="
                    width: 5px;
                    height: 22px;
                    background-color: coral;
                    display: block;
                  "
                ></span>
                <span
                  style="
                    margin-left: 5px;
                    height: 22px;
                    line-height: 22px;
                    font-size: 16px;
                    font-weight: 600;
                  "
                  >进件信息</span
                >
              </div>
            </a-col>
            <a-col :span="8">
              <!-- <a-form-model-item label="资方"> -->
              <a-radio-group v-model="form.zifangType" button-style="solid">
                <a-radio-button
                  v-for="(dict, index) in zifangTypeOptions"
                  :key="index"
                  :value="dict.dictValue"
                >
                  {{ dict.dictLabel }}
                </a-radio-button>
              </a-radio-group>
              <!-- </a-form-model-item> -->
            </a-col>
          </a-row>

          <a-row :gutter="32" v-if="form.zifangType">
            <a-col :span="8">
              <a-form-model-item label="车辆类型">
                <a-input
                  v-model="customerForm.carType"
                  placeholder="请输入车辆类型"
                >
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="车架号">
                <a-input
                  v-model="customerForm.chassisNo"
                  placeholder="请输入车架号"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="公里数">
                <a-input
                  v-model="customerForm.mileage"
                  placeholder="请输入公里数"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="是否在本人名下">
                <a-radio-group
                  defaultValue="0"
                  v-model="customerForm.isBelong"
                  button-style="solid"
                >
                  <a-radio-button value="0"> 是 </a-radio-button>
                  <a-radio-button value="1"> 否 </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否有贷款">
                <a-radio-group
                  defaultValue="0"
                  v-model="customerForm.isLoan"
                  button-style="solid"
                >
                  <a-radio-button value="0"> 是 </a-radio-button>
                  <a-radio-button value="1"> 否 </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="抵押情况">
                <a-input
                  v-model="customerForm.mortgageStatus"
                  placeholder="请输入抵押情况"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="车辆贷款情况">
                <a-input
                  v-model="customerForm.loanStatus"
                  placeholder="请输入车辆贷款情况"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="真实姓名">
                <a-input
                  v-model="customerForm.realName"
                  placeholder="请输入真实姓名"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="银行名称">
                <a-input
                  v-model="customerForm.bankName"
                  placeholder="请输入银行名称"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="银行卡号">
                <a-input
                  v-model="customerForm.bankNum"
                  placeholder="请输入银行卡号"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="身份证有效期开始日期">
                <a-date-picker
                  v-model="customerForm.idCardStartTime"
                  value-format="YYYY-MM-DD"
                  placeholder="选择日期"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item label="身份证有效期结束日期">
                <a-date-picker
                  v-model="customerForm.idCardEndTime"
                  value-format="YYYY-MM-DD"
                  placeholder="选择日期"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <a-button @click="cancel"> 取消 </a-button>
        <a-button type="primary" @click="submitForm" :loading="isFanganSave">
          保存
        </a-button>
      </template>
    </ant-modal>
    <a-modal
      :visible="visibleShowUser"
      title="选择客户"
      v-if="visibleShowUser"
      @cancel="visibleShowUser = false"
      @ok="visibleShowUser = false"
      width="900px"
      :dialog-style="{ top: '20px', heigth: '800px' }"
    >
      <a-card :bordered="false" class="table-card">
        <user-list @getCustomer="getCustomerInfo"></user-list>
      </a-card>
    </a-modal>
    <a-modal
      :visible="chooseUserVisible"
      title="选择客服"
      v-if="chooseUserVisible"
      width="55%"
      @ok="chooseUserVisible = false"
      @cancel="chooseUserVisible = false"
      :dialog-style="{ top: '10px' }"
    >
      <change-user
        @getUser="handleManualShare"
        :isCheckBox="true"
        :isKefu="1"
      />
    </a-modal>
  </div>
</template>
<script>
import BizJinjianInfoAddForm from "./BizJinjianInfoForm";
export default {
  ...BizJinjianInfoAddForm,
};
</script>
